<template>
     <el-main>
          <el-row >
<!--            影片显示栏-->
            <el-col  :span="18" :offset="3"  v-for="(nfilm,i) in nfilms" :key="i" class="high ">
<!--              影片详细资料栏-->
                <el-row class="lan">
<!--                  图片栏-->
                   <el-col :span="8">
                        <img :src="nfilm.nfImg" class="image">
                   </el-col>
<!--/static/p0.jpg-->
                    <el-col :offset="3" :span="10">
                      <el-row class="distance">
                        <h1>{{nfilm.nfName}}</h1>
                      </el-row>
                      <el-row >
                        <span><h2>导&nbsp;&nbsp;&nbsp;&nbsp;演：{{nfilm.nfDirector}}</h2></span>
                      </el-row>
                      <el-row class="distance">
                        <span><h2>领衔主演：{{nfilm.nfActor}}</h2></span>
                      </el-row>
                      <el-row class="distance">
                        <span><h2>片&nbsp;&nbsp;&nbsp;&nbsp;长：{{nfilm.nfLongtime}}</h2></span>
                      </el-row>
                      <el-row >
                        <el-button class="distance" @click="addshopcart(i)">点击预约</el-button>
                      </el-row>
                      <el-row>
                        <div>&nbsp;</div>
                      </el-row>
                    </el-col>
                </el-row>

            </el-col>

<!--快速搜索栏及增加栏-->
            <el-col :span="6" :offset="1">

            </el-col>
          </el-row>
<!--       分页-->
       <el-row class="top">
         <el-col :offset="8" :span="4">
           <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getcfilm" />
         </el-col>
       </el-row>
     </el-main>
</template>

<script>
  import Qs from "qs"
  import Pagination from '../../components/Pagination/index' // secondary package based on el-pagination
    export default {
        name: "OnNextMovie" ,
      data(){
          return{
            nfilms:[
               {nfImg:'',nfId:'',nfName:'噩梦',nfDirector:'打',nfActor:'大萨达，大萨达所，打算打算在',nfLongTime:90}
             ],
            list: null,
            listLoading: true,
            total:0,
            listQuery: {
              page: 1,
              limit: 5
            },
          }
      },
      created() {
        this.getcfilm()
      },
      methods:{

        getcfilm(){
             var vm =this;
               this.axios({
                 method:'get',
                 url:'http://localhost:80/api/nextfilm/getallnfilm?pageNum='+vm.listQuery.page+'&pageSize='+vm.listQuery.limit,
                // url:'http://localhost:80/api/nextfilm/getallnfilm',
                //  transformRequest: [function (data) {
                //    return Qs.stringify(data)
                //  }],

               }) .then(function (res) {
                   if(res.data.success){
                     console.log(res.data)
                    // vm.nfilms=res.data.data
                    vm.nfilms=res.data.data.list;
                     vm.total=res.data.data.total;
                   }
               })
           },
        //预约购物按钮 跳转详情选场次
        addshopcart(num){
            console.log(num);
            console.log(this.nfilms[num]);
          this.$router.push({name:"ordermovie",params:{nfilm:this.nfilms[num]}});
        }
      } ,
      components: { Pagination }
    }
</script>

<style scoped>
  .image{
    width: 400px;
  }
   .distance{
     margin-top: 10px;
   }
  .lan{
    border: 1px solid #F56C6C;
    border-radius: 5px;
    margin-top: 30px;
  }
  .top{
    margin-top: 50px;
  }


</style>
